<template>
    <el-card>
       <template #header>
           <div class="card-header">
               <span>新增电影</span>
               <span @click="$router.push({name:'MovieInfoList'})">返回列表</span>
           </div>
       </template>
       <!-- 表单 -->
       <!--进行表单验证 -->
       <el-form ref="movieInfoForm" label-width="100px" :model="movieInfoData" :rules="movieInfoDataRules">
           <el-form-item label="电影名称" prop="movie_name">
               <el-input placeholder="请输入电影名称" v-model="movieInfoData.movie_name"></el-input>
           </el-form-item>
           <el-form-item label="电影时长" prop="duration">
               <el-input placeholder="请输入电影时长" v-model="movieInfoData.duration"></el-input>
           </el-form-item>
           <el-form-item label="电影图片" prop="movie_pc">
               <el-upload
                   class="upload-box w-[120px] h-[150px] border-dashed border border-gray-500 flex justify-center items-center"
                   :action="baseURL + '/movie-info/uploadMoviePc'"
                   :show-file-list="false"
                   :on-success="uploadMoviePcSuccess"
                   :before-upload="beforeMoviePcUpload"
                   name="movie_pc">
          <img v-if="movieInfoData.movie_pc" :src="baseURL+movieInfoData.movie_pc" class="avatar" />
          <el-icon v-else :size="60">
            <PictureFilled />
          </el-icon>
        </el-upload>
           </el-form-item>
           <el-form-item label="上映时间" prop="publicTime">
               <el-date-picker v-model="movieInfoData.publicTime" type="date" placeholder="请选择上映日期" value-format="YYYY-MM-DD" />
           </el-form-item>
           <el-form-item label="电影类型" prop="tags">
               <el-input placeholder="请输入电影类型，用空格隔开" v-model="movieInfoData.tags"></el-input>
           </el-form-item>
           <el-form-item label="主演人员" prop="role">
               <el-input placeholder="请输入主演人员，用空格隔开" v-model="movieInfoData.role"></el-input>
           </el-form-item>
           <el-form-item label="电影评分" prop="movie_score">
               <el-input-number v-model="movieInfoData.movie_score" :precision="1" :step="0.1" :max="10" />
           </el-form-item>
           <el-form-item label="电影简介" prop="movie_desc">
               <el-input  placeholder="请输入电影简介" v-model="movieInfoData.movie_desc" type="textarea" rows="8"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="submitForm">保存数据</el-button>
               <el-button type="danger" @click="resetForm">重置表单</el-button>
           </el-form-item>
       </el-form>
    </el-card>
</template>
<script>
import { ref, reactive, inject } from "vue";
import API from "../../utils/API/index.js";
import { ElMessage,ElMessageBox } from "element-plus";
import { PictureFilled } from "@element-plus/icons-vue";
const baseURL = inject("baseURL");
export default {
    name: 'AddMovieInfo',
    data() {
        //1.函数返回的对象，才是页面上的数据
        return {
            movieInfoData: {
                id: 0,
                movie_name: "",
                duration: "",
                movie_pc: "",
                movie_desc: "",
                publicTime:"",
                tags:[],
                role:"",
                movie_score:0
            },
            //2.制定验证规则
            movieInfoDataRules: {
                movie_name:[
                    {required:true,message:"电影名称不能为空",triiger:"blur"},
                ],
                duration:[
                    {required:true,message:"电影时长不能为空",triiger:"blur"},
                    { pattern: /^\d+$/, message: "请输入正确的电影时长", trigger: "blur" },
                ],
                movie_pc:[
                    {required:true,message:"请输入电影海报",triiger:"blur"},
                ],
                publicTime:[
                    {required:true,message:"上映时间不能为空",triiger:"blur"},
                ],
                tags:[
                    {required:true,message:"电影类型不能为空",triiger:"blur"},
                ],
                role:[
                    {required:true,message:"主演人员不能为空",triiger:"blur"},
                ],
                movie_score:[
                    {required:true,message:"电影评分不能为空",triiger:"blur"},
                    {
                        pattern: /^\d(\.\d+)?$/,
                        message: "请输入正确的电影评分",
                        trigger: "blur",
                    },
                ],
                movie_desc:[
                    {required:true,message:"电影简介不能为空",triiger:"blur"},
                ]
            }
        };
    },
    //负责页面事件
    methods:{
        uploadMoviePcSuccess(result) {
            movieInfoData.movie_pc=result.data;
            ElMessage.success("上传成功");
        },
        beforeMoviePcUpload(rawFile) {
            if (!/^image\/(jpe?g|png|gif|svg|webp|bmp)$/.test(rawFile.type)) {
                ElMessage.error("请选择图片格式");
                return false;
                } else if (rawFile.size / 1024 / 1024 > 2) {
                    ElMessage.error("图片大小不能超过2MB!");
                    return false;
                    }
                    return true;
        },
        submitForm() {
            //2.开始验证全部的表单数据
            this.$refs["adminInfoForm"].validate(async valid=>{
                if(valid) {
                    //验证成功，可以提交数据
                    try {
                        let resp = await API.adminInfo.add(this.adminInfoData).then(resp=>{}).catch(error=>{});
                        //console.log("成功",resp);
                        //ElMessage弹出一个成功的消息，然后跳转到列表页面 AdminInfoList
                        ElMessage.success("添加成功");
                        this.$router.replace({ name:"AdminInfoList"});
                    } catch(error) {
                        // console.log("失败",error);
                        ElMessageBox.alert("添加失败","提示",{
                            type:"error",
                        });
                    }
                }
            });
        },
        resetForm() {
            //重置表单
            this.$refs["adminInfoForm"].resetFields();
        }
    },
};
</script>
<style lan="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>